<template style="background: #1b2b42;">
  <div id="content">
    <!-- 顶部标签 -->
    <van-nav-bar
      title="下单"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      @click-left="prev"
    >
    </van-nav-bar>
    <div class="order-title">提交订单</div>
    <!-- 订单地址 -->
    <div class="order-address" @click="changeAddr">
      <div><van-icon name="location-o" color="#2BC9A6" /></div>
      <div class="address-con" v-if="showAddrInfo">
        <div>
          <span style="font-size: 16px; font-weight: bold">{{
            addrInfo.username
          }}</span>
          <span style="margin-left: 10px">{{ addrInfo.mobile }}</span>
        </div>
        <div>
          {{ addrInfo.province.title }}{{ addrInfo.city.title
          }}{{ addrInfo.area.title }}{{ addrInfo.content }}
        </div>
      </div>
      <div class="address-con" v-else>
        <div>请选择收货地址</div>
      </div>
      <div><van-icon name="arrow" /></div>
    </div>
    <!-- 商品简述 -->
    <div class="store-desc">
      <div>
        <div class="store-image">
          <div>
            <van-image
              width="100"
              height="100"
              radius="10"
              :src="this.gemInfo.cover"
            />
          </div>
          <div class="store-image-desc">
            <div>{{ this.gemInfo.kj_title }}</div>
            <div style="color: #2aad96">{{ onePrice }} USDT</div>
          </div>
        </div>
        <div class="buy-count">
          <div style="font-size: 14px">购买数量</div>
          <div>
            <van-stepper v-model="buyCount" min="1" max="1" integer disabled />
          </div>
        </div>
        <div class="order-desc">
          <div style="font-size: 14px">订单备注</div>
          <div>
            <input
              v-model="orderDesc"
              type="text"
              name="desc"
              placeholder="填写内容已和卖家协商确认"
              style="
                background: #2b405d;
                border: none;
                color: #6c819e;
                font-size: 13px;
              "
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 底部菜单 -->
    <div class="bottom">
      <div class="store-nav">
        合计：<span style="color: #2a988a; font-weight: bold"
          >{{ totalPrice }} USDT</span
        >
      </div>
      <div class="buy-now" @click="buyNnow">立即购买</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { getGemDetail } from "../../api/gem";
import { createOrder } from "../../api/order";
import { getDefaultAddress, addrDetail } from "../../api/address";
import {
  ImagePreview,
  Image as VanImage,
  NavBar,
  Icon,
  Stepper,
  Field,
  Dialog,
} from "vant";

Vue.use(ImagePreview)
  .use(NavBar)
  .use(Icon)
  .use(VanImage)
  .use(Stepper)
  .use(Field);

export default {
  data() {
    return {
      id: 0,
      addr_id: 0,
      buyCount: 1,
      buyCountMax: 5,
      onePrice: 500,
      totalPrice: 0,
      orderDesc: "",
      gemInfo: {},
      addrInfo: {},
      showAddrInfo: false,
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.addr_id = this.$route.params.addr_id;
    var user_id = localStorage.getItem("user_id");
    var gme_id = localStorage.getItem(user_id + ":gme_id");
    if (this.id == undefined) {
      this.id = gme_id;
    }
    this.fetchDetail(this.id);
    this.fetchAddress();
  },
  methods: {
    // 获取商品详情
    fetchDetail(id) {
      getGemDetail({ id: id })
        .then((res) => {
          this.gemInfo = res.data;
          this.onePrice = res.data.kj_usdt_price;
          this.totalPrice = this.buyCount * this.onePrice;
        })
        .catch();
    },
    fetchAddress() {
      if (this.addr_id != undefined) {
        addrDetail({ id: this.addr_id }).then((res) => {
          this.addrInfo = res.data;
          if (this.addrInfo != "" || this.addrInfo != null) {
            this.showAddrInfo = true;
          }
        });
      } else {
        getDefaultAddress().then((res) => {
          this.addrInfo = res.data;
          this.addr_id = res.data.id;
          if (this.addr_id != undefined) {
            this.showAddrInfo = true;
          }
        });
      }
    },
    // 返回上一页
    prev() {
      this.$router.go(-1);
    },
    // 跳转至地址管理列表
    changeAddr() {
      this.$router.push({
        name: "storeAddr",
        params: {
          store_id: this.id,
        },
      });
    },
    // 点击立即购买
    buyNnow() {
      createOrder({
        kj_id: this.id,
        addr_id: this.addr_id,
        desc: this.orderDesc,
      })
        .then((res) => {
          var user_id = localStorage.getItem("user_id");
          localStorage.setItem(user_id + ":gme_id", "");
          Dialog.alert({
            message: res.message,
            theme: "round-button",
          }).then(() => {
            this.$router.push({ path: "store" });
          });
        })
        .catch((err) => {});
    },
    // 购买数量变化
    buyCountChange(e) {
      this.buyCount = e;
      this.totalPrice = this.onePrice * this.buyCount;
    },
  },
};
</script>

<style scoped>
#content {
  background: #1b2b42;
  min-height: 100vh;
}
.order-title {
  color: #fff;
  font-size: 24px;
  text-align: left;
  margin: 20px 0 20px 5%;
}
/* 收货地址样式 */
.order-address {
  background: #2b405d;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 5%;
  padding: 0 20px;
  height: 120px;
  border-radius: 10px;
  border-bottom: 1px dashed #7f94b2;
}
.address-con {
  text-align: left;
  line-height: 30px;
  font-size: 14px;
  width: 80%;
}
/* 商品信息 */
.store-desc {
  width: 90%;
  margin-top: 20px;
  margin-left: 5%;
  padding-top: 20px;
  background: #2b405d;
  color: #fff;
  border-radius: 10px;
  text-align: left;
}
.store-image {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #304562;
  padding-bottom: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}
.store-image-desc {
  line-height: 50px;
  margin-left: 20px;
}
.buy-count {
  line-height: 20px;
  border-bottom: 1px solid #304562;
  padding-bottom: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 5%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.order-desc {
  line-height: 20px;
  border-bottom: 1px solid #304562;
  padding-bottom: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 5%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/* 底部样式 */
.bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  background: #2b405d;
  height: 50px;
  position: fixed;
  bottom: 0;
  font-size: 15px;
}
.store-nav {
  color: #fff;
  width: 50%;
}
.buy-now {
  background: #31c9a2;
  color: #fff;
  width: 50%;
  line-height: 50px;
}
</style>
